<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Diary</title>
    <style>
        #peopleTable {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        #peopleTable th, #peopleTable td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        #peopleTable th {
            background-color: #f2f2f2;
        }
        #resultArea {
            margin-top: 20px;
        }
        button {
            padding: 8px 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 4px;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
   <h1 align = middle>Here is wang's diary!</h1>
   <h2>University's life</h2>
   <p>Welcome to the second year!</p>
   <h2>Summer holiday's life</h2>
    <p>The start of the web:the last of June(2023/6/30)<br>Also the first day of summer camp</p>
    <br>

    <form action="#" method="post">
        <label for="comments">Leave your comments:</label><br>
        <textarea id="comments" name="comments" rows="4" cols="50" placeholder="Write your comments here..."></textarea><br>
        <input type="submit" value="Submit">
    </form>
    <a href="https://gitee.com/wang-pinxue" target="_blank">请访问我的个人gitee仓库吧！</a>
    <br>
    <a href="https://www.bilibili.com/" target="_blank">在这里放松一下！</a><br>
    <p style="color: red;font-size: large;"><b>在这里看貂蝉的美照</b></p><br>
    <img src="貂蝉.jpeg" alt="三国杀貂蝉原画" width="600" height="300">
    
    <div>
        <h2>人员信息管理</h2>
        <button id="showPeopleBtn">显示所有人信息</button>
        <div id="resultArea">
            <!-- 这里将显示查询结果 -->
        </div>
    </div>

    <button onclick="WelcomeMessage()" style="right: auto; color: blueviolet;">恭喜你发现了宝藏！</button><br>
    <button id="button2" style="color: red;">这是button2</button>
    <script>
        function WelcomeMessage() {
            alert("欢迎来到王品学的个人日记页面！");
        }
        var button2 =document.getElementById("button2");
        button2.style.backgroundColor =" yellow";
        button2.onclick = function() {
            alert("你点击了button2按钮！");
        };
        document.addEventListener('click',function(){
            alert("通过addEventLisener调用了button2！");
        });
        // 模拟数据库中的人员信息
        const peopleDatabase = [
            { id: 1, name: "张三", gender: "男", age: 25 },
            { id: 2, name: "李四", gender: "女", age: 30 },
            { id: 3, name: "王五", gender: "男", age: 22 },
            { id: 4, name: "赵六", gender: "女", age: 28 },
            { id: 5, name: "钱七", gender: "男", age: 35 }
        ];
        
        // 显示人员信息函数
        function displayPeopleInfo() {
            const resultArea = document.getElementById('resultArea');
            
            // 创建表格
            const table = document.createElement('table');
            table.id = 'peopleTable';
            
            // 创建表头
            const thead = document.createElement('thead');
            const headerRow = document.createElement('tr');
            
            const headers = ['ID', '姓名', '性别', '年龄'];
            headers.forEach(headerText => {
                const th = document.createElement('th');
                th.textContent = headerText;
                headerRow.appendChild(th);
            });
            
            thead.appendChild(headerRow);
            table.appendChild(thead);
            
            // 创建表格主体
            const tbody = document.createElement('tbody');
            
            peopleDatabase.forEach(person => {
                const row = document.createElement('tr');
                
                const idCell = document.createElement('td');
                idCell.textContent = person.id;
                row.appendChild(idCell);
                
                const nameCell = document.createElement('td');
                nameCell.textContent = person.name;
                row.appendChild(nameCell);
                
                const genderCell = document.createElement('td');
                genderCell.textContent = person.gender;
                row.appendChild(genderCell);
                
                const ageCell = document.createElement('td');
                ageCell.textContent = person.age;
                row.appendChild(ageCell);
                
                tbody.appendChild(row);
            });
            
            table.appendChild(tbody);
            
            // 清空结果区域并添加表格
            resultArea.innerHTML = '';
            resultArea.appendChild(table);
        }
        
        // 添加按钮点击事件监听
        document.getElementById('showPeopleBtn').addEventListener('click', displayPeopleInfo);
    </script>
</body>
</html>